<template>
    <div class="container">
        <div class="menu">
            <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
                <el-radio-button :label="false">展开</el-radio-button>
                <el-radio-button :label="true">收起</el-radio-button>
            </el-radio-group>

            <el-menu default-active="1-1" :collapse="isCollapse" :router="true">
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span slot="title">导航一</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/mue/one">选项1</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span slot="title">导航二</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/mue/two">选项1</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </div>

        <div class="con">
            <router-view></router-view>
        </div>
    </div>

</template>
<script>
import { RouterView } from 'vue-router';

export default {
    name: '',
    data() {
        return {
            isCollapse: false
        }
    },
    mounted() {
    },
    methods: {
    },
}
</script>
<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
    border: 1px solid red;
    display: flex;

    .menu {
        width: 20%;
        height: 100%;
        background-color: salmon;
    }

    .con {
        width: 80%;
        height: 100%;
        // background-color: red;
    }
}
</style>
